<template>
  <div>
    <!-- <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="(tab, index) in tabs"
        :key="index"
        :label="tab.label"
        :name="tab.name"
      ></el-tab-pane>
    </el-tabs> -->

    <div class="record-list grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
      <RecordItem
        v-for="(item, index) in sortList"
        :key="item.oldIndex"
        :item="item"
        :index="index"
        :oldIndex="item.oldIndex"
        :mode="mode"
        :activeTab="activeTab"
        :list="sortList"
        :editStatus="editStatus"
        @delItem="handleDelItem"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, toRefs } from 'vue'
import RecordItem from './RecordItem.vue'

const props = defineProps({
  list: Array,
  editStatus: Boolean,
  mode: String
})
const { list, editStatus } = toRefs(props)
const activeName = ref('TotalVictoryField')
const tabs = [
  { label: "总胜场", name: "TotalVictoryField", sort: sortField },
  { label: '黑胜场', name: 'blackField', sort: sortBlackfield },
  { label: '按胜率', name: 'rate', sort: sortRate },
  { label: '按CARRY', name: 'carry', sort: sortBlackCarry }
]

function sortBlackCarry(a, b) {
  if (a.blackoutTimes && b.blackoutTimes) {
    return (a.blackMvp + a.blackSvp) / a.blackoutTimes - (b.blackMvp + b.blackSvp) / b.blackoutTimes
  } else {
    return -1
  }
}

function sortRate(a, b) {
  if (a.blackoutTimes && b.blackoutTimes) {
    return a.blackoutWins  / a.blackoutTimes - b.blackoutWins / b.blackoutTimes
  } else {
    return -1
  }
}

function sortBlackfield(a, b) {
  return a.blackoutWins * 2 - a.blackoutTimes - b.blackoutWins * 2 + b.blackoutTimes
}

// function sortCarry(a, b) {
//   return (a.mvp + a.svp) / a.totalGames > (b.mvp + b.svp) / b.totalGames
// }

function sortField(a, b) {
  return a.wins - a.losses - b.wins + b.losses
}

// function sortAllChaotic(a, b) {
//   return a.allChaotic.wins - a.allChaotic.losses - b.allChaotic.wins + b.allChaotic.losses
// }

// function sortBlackRate(a, b) {
//   if (!a.blackoutTimes) return false
//   if (!b.blackoutTimes) return true
//   return a.blackoutWins / a.blackoutTimes > b.blackoutWins / b.blackoutTimes
// }

// function sortSingleRate(a, b) {
//   if (!(a.totalGames - a.blackoutTimes)) return false
//   if (!(b.totalGames - b.blackoutTimes)) return true
//   return (
//     (a.wins - a.blackoutWins) / (a.totalGames - a.blackoutTimes) >
//     (b.wins - b.blackoutWins) / (b.totalGames - b.blackoutTimes)
//   )
// }

const activeTab = computed(() => tabs.find((t) => t.name === activeName.value))

const sortList = computed(() => {
  const result = list.value.map((item, index) => ({ ...item, oldIndex: index }))
  const targetSort = activeTab.value.sort
  return result.sort(targetSort).reverse()
})

function handleDelItem(index) {
  list.value.splice(index, 1)

  if (localStorage.getItem('lol')) {
    localStorage.setItem('lol', JSON.stringify(props.list))
  }
}

</script>

<style lang="scss" scoped></style>
